<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>填写物流</title>
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/jquery-weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.min.css" />

    <style>
        *{padding: 0;margin: 0;}
        .wpf_orderBox{position: relative;overflow-x: hidden;width: 100%;}
        .weui-cells,.weui-panel{margin-top: 0;}
        .weui-panel:before,.weui-media-box_appmsgs:nth-child(1):before{border-top: none;}
        .weui-cell__hd img{margin-right: 15px;}
        .weui-media-box_appmsg .weui-media-box__hd{width: 70px;height: 70px;}
        .weui-media-box__title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 18px;font-size: 16px;color: #373938;}
        .weui-media-box__color{color: #999999;font-size: 12px;padding-top: 5px;box-sizing: border-box;}
        .weui-media-box_appmsgs{display: block;position: relative;}
        .weui-media-box_appmsgs:before {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #E5E5E5;color: #999999;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);left: 15px;}

        .weui-cell__ft_input{line-height: 25px;border: none;font-size: 16px;text-align: right;padding-right: 10px;box-sizing: border-box;}
        .weui-cell__ft_inputs{width: 100%;line-height: 25px;border: none;font-size: 16px;text-align: left;}
        .refresh_btn{width: 100%;height: 45px;line-height: 45px;overflow: hidden;position: fixed;bottom: 0;left: 0;background: #FE0036;letter-spacing: 2px;text-align: center;color: #ffffff;font-size: 16px;z-index: 10;}
        .weui-cell_accesss{color: inherit;}
        .weui-cell_accesss .weui-cell__bd{flex: 0.6;}
        .weui-cell_accesss .weui-cell__ft{flex: 1.4;}
        .weui-cell__sao_box{display: flex;width: 30px;flex-direction: row-reverse;}
        .weui-cell__sao{height: 22px;width: 22px}
        .weui-cell__sao img{width: 100%;height: 100%;}
    </style>
</head>
<body>
<div class="wpf_orderBox">
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__bd">
            <div class="weui-media-box_appmsg weui-media-box_appmsgs">
                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">商品名称商品名称商品名称商品名称</h4>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div style="height: 8px;background: #e5e5e5;"></div>
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物流公司</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_input choice" id="goods_status" type="text" value="" placeholder="请选择">
            </div>
        </a>
        <a class="weui-cell weui-cell_accesss" href="javascript:;">
            <div class="weui-cell__bd">
                <p>物流单号：</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_inputs outfocus"  id="goods_cause" type="number" value="" placeholder="请填写物流单号" >
            </div>
            <div class="weui-cell__sao_box">
                <div class="weui-cell__sao">
                    <img src="__PUBLIC__/orderImg/sao.svg" alt="">
                </div>
            </div>
        </a>
        <a class="weui-cell weui-cell_accesss" href="javascript:;">
            <div class="weui-cell__bd">
                <p>联系电话：</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_inputs outfocus"  id="goods_phone" type="number" value="" placeholder="请填写联系电话" >
            </div>
            <div class="weui-cell__sao_box" style="opacity: 0;">
                <div class="weui-cell__sao">
                    <img src="__PUBLIC__/orderImg/sao.svg" alt="">
                </div>
            </div>
        </a>
    </div>
    <div class="refresh_btn" onclick="">提交</div>
</div>
</body>
</html>
<script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="http://cdn.suoluomei.com/common/js/jquery-weui.js"></script>
<script src="http://cdn.suoluomei.com/common/js2.0/city-picker/city-picker.min.js"></script>
<script>
    $(document).ready(function (){
        // 下拉选择货物状态
        $("#goods_status").picker({
            title: "请选择货物状态",
            cols: [
                {
                    textAlign: 'center',
                    values: ['请选择', '顺丰快递', '圆通快递', '申通快递', '韵达快递', '中通快递', '其他快递']
                }
            ]
        });
        // 离焦事件
        $(document).on('touchstart','.choice', function(){
            $(".outfocus").blur();
        });
    });
</script>